/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.wo-shop.net
* @Contact: QQ:2487937004
*/
<template>
	<div class="list">
		<u-image width="100%" height="520" :src="bannerSrc"></u-image>
		<u-sticky :offset-top="offsetTop" h5-nav-height="44">
			<!-- 只能有一个根元素 -->
			<scroll-view class="list-nav" scroll-x="true" :scroll-with-animation="true" :scroll-into-view="toId">
				<span :class="[index === currIndex ? 'active' : '']" v-for="(item, index) in categoryList"
					:id="'item' + index" :key="index" @click="changeTab(index)">{{ item.cate_name }}</span>
			</scroll-view>
		</u-sticky>

		<div class="goodsList">
			<div class="item" v-for="(item, index) in list" :key="index" hover-class="bg-hover"
				@click="getnav('/pagesC/goods/goodsDetails?id=' + item.goods_id)">
				
				<u-image :src="item.thumb_url" width="220" height="220" border-radius="12" style="margin-right:20px">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<div class="item-right">
					<h2>{{ item.goods_name }}</h2>
					<u-line-progress v-if="false" :striped="true" :percent="$u.random(10,100)" active-color="#f82fce"
						:striped-active="true"></u-line-progress>
					<div class="item-right__bottom">
						<div class="item-right__bottom--left flex">
							<span class="goodsPrice">¥{{ item.price }}</span>
							<i>¥{{ item.shop_price }}</i>
						</div>
						<div class="pinBtn">
							<p>{{$t('去拼团')}}</p>
							<p class="hasPinText">{{$t('已拼')}}{{item.sold}}件</p>
						</div>
					</div>
				</div>
			</div>
			<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
		</div>
	</div>
</template>

<script>
	let page = 0
	export default {
		data() {
			return {
				loadingType: 0, // 分页
				toId: 'item000',
				pageShow: false,
				categoryList: [],
				currIndex: 0,
				list: [],
				page: 0,
				isLoadMore: false,
				isLoading: false,
				isMore: false,
				bannerSrc: '',
				background: {
					backgroundImage: 'linear-gradient(180deg,#6b04e3,#8F17EC)'
				},
				loadStatus:'loadmore',
				iconType:'flower',
				loadText:{
					loadmore:this.$t('上拉加载更多'),
					loading:this.$t('努力加载中'),
					nomore:this.$t('没有更多数据了')
				},
				offsetTop: 0
			}
		},
		onReachBottom() {

		},
		onShow() {
			this.setOffestTop()
		},
		onLoad(option) {
			page = 0
			this.getAssembleCate()
			this.getAssembleList(1)

			this.getBannerImage(option.id)
		},

		methods: {
			// 适配吸顶tab高度
			setOffestTop() {
				// #ifndef H5
				let systemInfo = uni.getSystemInfoSync()
				let topPx = systemInfo.statusBarHeight + 44 // 顶部状态栏+沉浸式自定义顶部导航
				this.offsetTop = topPx / (uni.upx2px(topPx) / topPx) - 2 // px转rpx
				// #endif
			},
			getBannerImage(id) {
				this.$http.getAdByTag({
					tag: 'mobile_pintuan_banner'
				}).then(res => {
					if(res.status == 200){
						this.bannerSrc = res.data[0].ad_pic
					}
				})
			},
			changeTab(index) {
				this.currIndex = index
				this.toId = `item${index}`
				page = 0
				this.list = []
				this.status = ''
				this.isLoadMore = false

				this.$nextTick(() => {
					this.getAssembleList()
				})
			},

			getAssembleCate() {
				this.$http.getAssembleCate().then(res => {
					if (res.status === 200) {
						let data = res.data
						data.unshift({
							id: '',
							cate_name: this.$t('推荐')
						})
						this.categoryList = data
					}
				})
			},

			getAssembleList(isFirst) {
				// if (this.status === 'nomore' || this.status === 'loading'){
					
				// }

				if (page === 0) {
					this.$loading()
				}
				if (page > 0) {
					// this.status = 'loading'
				}
				
				this.$http.getAssembleList({
					page: page + 1,
					cate_id: isFirst ? '' : this.categoryList[this.currIndex].id
				}).then(res => {
					if (res.status === 200) {
						page = page + 1
						if (!res.data.length) {
							// this.status = 'nomore'
							this.loadStatus = 'nomore'
							return false
						}
						
						this.list.push(...res.data)

						this.status = 'more'
						this.pageShow = true
						
					}
				})
			}
		},
		onReachBottom () {
			// 上拉加载更多
			this.loadStatus='loading',
			setTimeout(()=>{
				this.getAssembleList()
			},1000)
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #6b04e3;
	}

	.list {
		background-color: #6b04e3;

	}

	.list-nav {
		height: 88upx;
		line-height: 88upx;
		font-size: 0;
		white-space: nowrap;
		background: #6905e3;

		span.active {
			&::after {
				background: #fff;
			}

			font-weight: 800;
			color: #fff;
		}

		span {
			display: inline-block;
			position: relative;
			margin-right: 33upx;
			font-size: 30upx;
			color: #dbc9f1;

			&::after {
				position: absolute;
				bottom: 0;
				left: 50%;
				width: 42upx;
				height: 8upx;
				background: transparent;
				transform: translateX(-50%);
				border-radius: 100px;
				content: '';
			}

			&:first-child {
				margin-left: 30upx;
			}

			&:last-child {
				margin-right: 30upx;
			}
		}
	}

	.search {
		display: flex;
		align-items: center;
		height: 64uxp;
		margin: 100upx 24upx 12upx;
		padding-left: 46upx;
		background: rgba(241, 241, 241, 1);
		border-radius: 32upx;

		i {
			padding-right: 16upx;
		}
	}

	.goodsList {
		width: 100%;

		.item {
			margin: 20upx;
			border-radius: 18upx;
			display: flex;
			height: 244upx;
			padding: 15upx;
			background-color: #fff;
			position: relative;

			&index {
				position: absolute;
				top: 20upx;
				left: 20upx;
				background-color: rgba(#000, 0.3);
				width: 40upx;
				height: 40upx;
				line-height: 40upx;
				display: inline-block;
				z-index: 99;
				text-align: center;
				color: #fff;
				border-radius: 5upx
			}

			.item-right {
				flex: 1;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.item-right__bottom {
					display: flex;
					justify-content: space-between;
					margin-top: 10upx;

					.pinBtn {
						text-align: center;
						background-image: linear-gradient(45deg, #f507b3, #f809b4);
						font-weight: bolder;
						border-radius: 12upx;
						color: #fff;
						font-size: 28upx;
						padding: 8upx 30upx;
						line-height: 28upx;

						&>p {
							line-height: 1;
						}

						.hasPinText {
							font-size: 20upx;
							font-weight: normal;
							color: #ffdef6;
							margin-top: 6upx;
						}
					}
				}

				.item-right__bottom--left {
					align-items: flex-end;

					span {
						padding-right: 12upx;
						color: #F7544E;
						font-size: 30upx;
					}

					i {
						color: #999;
						font-size: 24upx;
						text-decoration: line-through;
					}
				}

				h2 {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
					line-height: 1.3;
					margin-bottom: 16upx;
					color: #333;
					font-size: 28upx;
				}

				&>span {
					display: block;
					margin-bottom: 29upx;
					color: #999;
					font-size: 24upx;
				}
			}
		}
	}
</style>
